<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:cu="http://javaserverfaces.dev.java.net/gaadi/feature-taglib">

    <script type="text/javascript">
        $(document).ready(function(){
                $('a#forgotpasslink').click(
                        function(){showTOC();
                });

                //variable to reference window
        $myWindow = jQuery('#passwordforgot');

        //instantiate the dialog
        $myWindow.dialog({
                
                modal: true,
                position: 'center',
                autoOpen:false,
                title:'My ad - Password Assistance',
                overlay: { opacity: 0.5, background: 'black'}
       });
        
        });

        function showTOC() {
                $('#passwordforgot').dialog("open");
        }
    </script>

    <c:if test="#{flow.flow}">
        <div class="progressBar">
            <ul class="">
                <li>
                    <span class="counter listing"></span>
                    <span class="countertext">Listing</span>
                </li>
                <li class="active">
                    <span class="contact counter bg104"></span>
                    <span class="countertext">Contact</span>
                </li>
                <li>
                    <span class="counter options bg312"></span>
                    <span class="countertext">Options</span>
                </li>
                <li>
                    <span class="counter pictures bg520"></span>
                    <span class="countertext">Pictures</span>
                </li>
                <li>
                    <span class="counter verify bg728"></span>
                    <span class="countertext">Verify</span>
                </li>
                <li id="online">
                    <span class="counter online bg1144"></span>
                    <span class="countertext">Online</span>
                </li>
            </ul>
        </div>
    </c:if>

    <div id="logindivs">
        <div style="clear:both"/>
        <h:messages globalOnly="true" errorClass="globalerror" infoClass="globalconfirmation" layout="list" />

<!-- <f:event type="postValidate"  listener="#{loginBean.validate}"/>  -->
        <div class="box" style="padding:10px 0">
            <div class="greybox box2" style="height:180px;">
                <div class="box-content">
                    <div class="row headline login">
                        <h2> Already a Customer?</h2>
                    </div>
                    <h:form id="form" prependId="false" onsubmit="return checkForm(this, '#{cc.clientId}')">
                        <div class="content_inner">
                            <div  style="min-height:80px;">
                                <div class="cols2">
                                    <div class="col-content">
                                        <strong><h:outputLabel for="userName" value="username:"/></strong>&#160;&#160;&#160;&#160;
                                        <h:inputText id="userName" value="#{loginBean.userName}" required="true" requiredMessage="value is required" >
                                            <f:ajax render="nameError"/>
                                        </h:inputText><br></br>
                                        <h:message  for="userName" errorClass="error"/>
                                        <h:outputText id="nameError" value="#{loginBean.nameError}" styleClass="error"/>
                                    </div>
                                    <div class="col-content">
                                        <h:outputLabel for="password" value="password:" />
                                        <h:inputSecret id="password" value="#{loginBean.password}" required="true" requiredMessage="Required!!"/>
                                        <h:message for="password" errorClass="error"/>
                                    </div>
                                </div>
                                <div class="cols1">
                                    <div class="col-content"><a id="forgotpasslink" href="#">Forgotten Your Password?</a></div>
                                </div>
                            </div>
                            <div class="row bottom">
                                <div class="col-content" style=""><h:panelGroup style="display:block; text-align:center;">
                                        <h:commandButton type="submit" id="login" action="#{loginBean.login}" value="login" onclick="$(this).focus();"/>
                                    </h:panelGroup></div>
                            </div>
                        </div>
                    </h:form>
                </div>
            </div>

            <div class="clear"/>
        </div>

        <div class="separator line"/>

        <h:form id="back">
            <h:commandButton type="submit" id="back" action="#{carSession.backData}" value="#{msg['button.back']}" rendered="#{flow.flow}"/></h:form>
    </div>

    <!-- Register Div -->
    <div id="passwordforgot" >
        <div class="box-content">
            <h:form id="lostpass" prependId="false">
                <div class="content_inner">
                    <div class="cols1">
                        <div class="col-content" style="padding:30px 0 10px 0">
                            <strong><h:outputLabel for="userName" value="email:      "/></strong>
                            <h:inputText id="emailforgot" value="" required="true" >
                            </h:inputText>
                            <h:message  for="emailforgot" errorClass="error"/>
                        </div>
                    </div>
                    <div class="row bottom">
                        <div class="col-content" style=""><h:panelGroup style="display:block; text-align:center;">
                                <h:commandButton type="submit" id="forgotpass" action="#{loginBean.doRecoverLostPassword}" value="submit" />
                            </h:panelGroup></div>
                    </div>
                </div>
            </h:form>
        </div>
    </div>
</ui:composition>